<template>
   <div class="sub-nav">
       <div class="navBottom" v-if="mold === 'navBottom'">
           <div class="nav-item">
               <router-link :to="{name: 'RegisterView'}">注册账号</router-link>
               <template v-if="currentUser.email">
                   <!-- 阻止默认点击事件 -->
                   <a href="#" @click.prevent="logout()">退出登录</a>
               </template>
               <template v-else>
                    <router-link :to="{ name: 'LoginView'}">登录豆瓣</router-link>
               </template>
           </div>
           <div class="nav-item">
               <a href="https://movie.douban.com/">桌面版豆瓣</a>
                    <a href="#">使用豆瓣App</a>
           </div>
       </div>
        <!--  -->
        <div class="quickNav" v-if="mold === 'quickNav'">
            <ul class="quick-nav">
                <li>
                    <router-link :to="{ name: 'MovieView'}">影院热映</router-link>
                </li>
                <li>
                    <router-link :to="{ name: 'StatusView'}">欧美新歌榜</router-link>
                </li>
                <li>
                    <router-link :to="{ name: 'RegisterView'}">注册新账号</router-link>
                </li>
                <li>
                    <template v-if="currentUser.email">
                        <a href="#" @click.prevent="logout()">退出登录</a>
                    </template>
                    <template v-else>
                        <router-link :to="{ name: 'LoginView'}">登录豆瓣</router-link>
                    </template>
                </li>
            </ul>
        </div>
   </div>
</template>

<script>    
    // mapGetters 辅助函数将 store 中的 getter 映射到局部计算属性
    import { mapGetters } from 'vuex';

   export default {
       name: 'sub-nav',
       // 父向子传值
       props: {
           mold: {
               type: String,
               default: 'quickNav',
           }
       },
        computed: {
            currentLink: function(){
                return this.currentUser.name ? 'StatusView' : 'LoginView'
            },
            holder: function(){
                return this.currentUser.name ? this.currentUser.name : '请先登录'
            },
             //  使用对象展开运算符将 getter 混入 computed 对象中
            ...mapGetters(['currentUser']),
        },
        methods: {
            logout(){
                // 以相应的 type 调用 store.commit
                this.$store.commit({
                    type: 'logout'
                })
                this.$router.push({ name: 'HomeView'})
            }
        },
        created(){      // 实例创建之后
            // 查看本地储存是否存在用户的邮箱 存在的话就获取
            if(localStorage.getItem('email')){
                this.$store.commit({
                    type: 'getLocalUser'
                })
            }
        }
    }
    
</script>

<style lang="scss" scoped>
.navBottom{
        width: 100%;
        border-bottom: 0.1rem solid #F3F3F3;
    .nav-item{
        border-top: 0.1rem solid #F3F3F3;
        padding: 1.3rem 0;
        text-align: center;
    }
    a{
        margin: 0 auto;
        box-sizing: border-box;
        font-size: 1.5rem;
        color: #42bd56;
        width: 50%;
        display: inline-block;
        &:first-child {
            border-right: 0.1rem solid #e5e5e5;
        }
    }
}
.quickNav{
    ul{
        overflow: hidden;
        margin: 1rem 0 0 0;
        padding-top: 0.6rem;
    }
    li {
      float: left;
      width: 50%;
      padding: 0.3rem;
      box-sizing: border-box;
      font-size: 1.5rem;
    }
    a {
      display: block;
      max-width: 100%;
      padding: 1.2rem 0;
      line-height: 2rem;
      text-align: center;
      background-color: #f6f6f6;
      color: #494949;
      border-radius: 0.2rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
    }
}
    
</style>
